import React from 'react'
import {NavBar,Form,Button,Field} from 'react-vant'
import { useTranslation } from 'react-i18next'
export default function App() {
  const [form] = Form.useForm()

  const {t,i18n}=useTranslation()

  return (
    <div>
    <NavBar
      title="登录"
      leftArrow=""
      leftText={t('register')}
      rightText={i18n.language ==='en' ? 'zh' : 'en'}
      onClickLeft={() => navigate('/register')}
      onClickRight={() =>
        i18n.changeLanguage(i18n.language === 'en' ? 'zh' : 'en')
      }
    />

    <Form
      form={form}
      showValidateMessage={false}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType="submit" type="primary" block>
            {t('submit')}
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
        intro="确保这是唯一的用户名"
        rules={[{ required: true, message: '请填写用户名' }]}
        name="username"
        label={t('user')}
      >
        <Field placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name="password"
        label={t('password')}
      >
        <Field placeholder="请输入密码" />
      </Form.Item>
      <Form.Item>
        <Field
          name="yzm"
          label={t('yzm')}
          placeholder="请输入验证码"
        />
      </Form.Item>
    </Form>
  </div>
  )
}
